import siteHeader from "./siteHeader.js";
import backTop    from "./backTop.js";
import loaddata   from "./loaddata.js";
import render     from "./render.js";
import carts      from "./cart.js";
import index      from "./index.js";

function shop(){}

$.extend(shop.prototype , {
    init : function(id){
        console.log("i am shop");
        this.list_inline = $(".list-inline");
        this.product_main_image = $(".product-main-image");

        this.sign   = $(".signin-btn");
        this.dLabel = $("#dLabel");
            
        var res = loaddata.shop();
        

        res.then($.proxy(function(res){
            this.res = JSON.parse(res);
            id > 44 ? (res = this.res.goods_star) : (res = this.res.goods_list);
            // console.log(res);
            //成功获取了数据
            render.renderShop(res,id);
           //大图片
            this.bigImg = $(".zoomImg");
            //小图片
            this.smallImg = $(".product-main-image a img") 
            //这里将获取图片大小放入异步队列，防止初始没有获取到值
            setTimeout($.proxy(function(){
              
                //点击小图片切换大图片
                this.smallSize = {
                    width : this.smallImg.width(),
                    height : this.smallImg.height()
                }
                this.bigSize = {
                    width : this.smallSize.width * 1.5,
                    height : this.smallSize.height * 1.5 
                }
            },this),1000)
           
            //图片框距离页面的距离
            this.imgPosition ={
                left : this.product_main_image.offset().left,
                top  : this.product_main_image.offset().top
            }
            this.list_inline.on("click",$.proxy(this.currentLi,this));
            //放大镜
            this.product_main_image.on("mouseenter",$.proxy(this.overImg,this));
            this.product_main_image.on("mousemove",$.proxy(this.moveImg,this));
            this.product_main_image.on("mouseleave",$.proxy(this.leaveImg,this));

            //执行购物车功能
            carts.init(id,this.res);  
            this.validateTocken();         
        },this))

        siteHeader.init();
        backTop.init();
    },
    currentLi : function(evt){
        var e = evt || window.event;
        var target = e.target || e.srcElenemt;
        // console.log($(target).closest("li"));
        var $li = $(target).closest("li");
        if($li.hasClass("current")){
            $li.siblings().removeClass("current");
        }else{
            $li.addClass("current").siblings().removeClass("current");
            var src = $li.children("a").attr("data-middlesrc");
            this.product_main_image.find("img").attr("src",src);
            // console.log($li.find("img"))
        }        
    },
    overImg : function(evt){        
        this.smallImg.css("display","none");
        this.bigImg.css({
            "position"  : "absolute",   
            "width"     : this.bigSize.width ,
            "height"    : this.bigSize.height,        
             top        : 0,
             left       : 0,
            "max-width" :"none",
            "max-height": "none",
            "border"    : "none",
            "opacity"   : "1"
        })
    },
    moveImg : function(evt){
        var e = evt || window.event;
        var x = e.pageX - this.imgPosition.left - this.smallSize.width/2;
        var y = e.pageY - this.imgPosition.top  - this.smallSize.height/2;    
        this.move( -x*1.5, -y*1.5);
    },
    move : function(x,y){
        this.bigImg.css({
            // width : this.bigSize.width,
            // height: this.bigSize.height,
            left  : x,
            top   : y
        })
    },
    leaveImg : function(){
        this.smallImg.css("display","block");
        this.bigImg.css("opacity" , "0");
    },
    validateTocken :function (){
        let url = "http://localhost/js/test/konka/php/login.php";
        $.ajax(url)
        .then( res => {
              res = JSON.parse(res)
              if(res.state){
                    return false;
              }        
              this.dLabel.html(res.username+",欢迎你");
              $(this.sign[0]).css("display","none");
              $(this.sign[1]).css("display","none");
              this.dLabel.on("click",function(){
                  $(".dropdown-menu").toggle(500);
              })
             
        })
    }
})

export default new shop();